iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
1
Software Development

PHP新手30天實戰金流系列 第 5

[Day5] FRONTEND(blade) + Route name

  • 分享至 

  • xImage
  •  
tags: PHP新手30天實戰金流, Laravel

前言

簡單做個有購物車的 UI。參考 纯手工打造一个简单的电子商务网站(一) —— 後台新增商品及前台显示來實作。(https://xueyuanjun.com/post/5075.html)

先來一點可愛又輕鬆的內容XD

Icons 資源

  1. 使用 fontawesome
    1. 填寫 email 註冊,完成後會得到一個套件碼,將它貼在 resources/views/welcome.blade.php<head>

    2. 搜尋在 fontawesome 的 icons 頁面中搜尋 shopping cart

    3. 點擊圖片之後可以看到程式碼:

    <i class="fas fa-shopping-cart"></i>
    
    1. 將 icon的程式碼貼在文字前面:
    <a href="#"><i class="fas fa-shopping-cart"></i>Shopping cart</a>
    

前端處理

目前主要分成三個部分:

  1. master.blade.php - 畫面模板基底(外部資源載入、導覽列)
  2. admin/ - 店家管理頁面
  3. customer/ - 顧客操作頁面

模板基底 master.blade.php

```=
@if (Request::is('customer/*'))
    <div style="padding-top:16px;padding-right:16px"><a href="#" ><i class="fas fa-shopping-cart"></i>Shopping cart</a></div>    
@endif
```
  1. 在 resource/views 下 新增 master.blade.php

    
    <html>
    
    <head>
        <title>Laravel 商店</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://kit.fontawesome.com/aa6119cf15.js"></script>
    </head>
    
    <body>
        @section('sidebar')
        <nav class="navbar navbar-default  navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">Laravel 商店</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <a href="{{ route('logout') }}" onclick="event.preventDefault();
                                                document.getElementById('logout-form').submit();">
                            {{ __('Logout') }}
                        </a>
    
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                            @csrf
                        </form>
                        @if (Request::is('customer/*'))
                        <div style="padding-top:16px;padding-right:16px"><a href="#"><i class="fas fa-shopping-cart"></i>Shopping cart</a></div>
                        @endif
                        @if (Route::has('login'))
                        @auth
                        <a href="{{ url('/home') }}">Home</a>
                        @else
                        <a href="{{ route('login') }}">Login</a>
    
                        @if (Route::has('register'))
                        <a href="{{ route('register') }}">Register</a>
                        @endif
                        @endauth
                        @endif
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        @show
    
        <div class="container">
            @yield('content')
        </div>
    </body>
    
    </html>
    

admin/ - 店家管理頁面

  1. 在 views 下建立 admin/products_list.blade.phpadmin/new_object.blade.php

    1. products_list.blade.php
    @extends('master')
    
    @section('商品列表', 'Page Title')
    
    @section('sidebar')
    @parent
    @endsection
    
    @section('content')
        <div class="container" style="padding-top:70px">
            <div class="row">
                <div class="col-md-6">
                    <a href="/admin/product/new"><button class="btn btn-success">新增商品</button></a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-striped">
                        <thead>
                            <td>名稱</td>
                            <td>價格</td>
                            <td>描述</td>
                            <td>操作</td>
                        </thead>
                        <tbody>
                            <tr>
                                <td>名稱</td>
                                <td>價格</td>
                                <td>描述</td>
                                <td>操作</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endsection
    

    1. new_object.blade.php
    @extends('master')
    
    @section('商品列表', 'Page Title')
    
    @section('sidebar')
    @parent
    @endsection
    
    @section('content')
    <div class="container" style="padding-top:70px">
        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="panel-title">新增商品</div>
            </div>
            <div class="panel-body">
                <form method="POST" action="save" class="form-horizontal" enctype="multipart/form-data" role="form">
                    <fieldset>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="name">名稱</label>
                            <div class="col-md-9">
                                <input id="name" name="name" type="text" placeholder="商品名稱" class="form-control input-md" required="">
    
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="textarea">描述</label>
                            <div class="col-md-9">
                                <textarea class="form-control" id="textarea" name="description"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="price">價格</label>
                            <div class="col-md-9">
                                <input id="price" name="price" type="text" placeholder="商品價格" class="form-control input-md" required="">
    
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="imageurl">圖片URL</label>
                            <div class="col-md-9">
                                <input id="imageurl" name="imageurl" type="text" placeholder="商品圖片URL" class="form-control input-md">
    
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="file">文件</label>
                            <div class="col-md-9">
                                <input id="file" name="file" class="input-file" type="file">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="submit"></label>
                            <div class="col-md-9">
                                <button id="submit" name="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
    
                    </fieldset>
    
                </form>
            </div>
        </div>
    </div>
    @endsection
    

customer/ - 顧客操作頁面

  • resources/views/customer/shopping_mall.blade.php 單純貼簡單的模板
@extends('master')

@section('顧客', 'Page Title')

@section('sidebar')
@parent
@endsection

@section('content')
<div class="container" style="padding-top:70px">
    <div class="row">
    </div>
</div>
@endsection

為路由命名

routes/web.php

  • 當我們要為一個路由命名時,可以這樣做:
Route::get('/customer/shopping_mall', function () {
    return view('customer/shopping');
})->name('customer');
  • 若是要為一個群組的路由命名時,這樣是行不通的

    Route::group(function(){
        Route::get('/shopping_mall', function () {
            return view('customer/shopping');
        });
    })->name('customer');
    

    用 namespace 雖然不會出現錯誤,不過沒有命名作用

    Route::group(['prefix'=>'customer','namespace'=>'customer'], function(){
        Route::get('/shopping_mall', function () {
            return view('customer/shopping');
        });
    });
    

    要用 as

    Route::group(['prefix'=>'customer','as'=>'customer'], function(){
        Route::get('/shopping_mall', function () {
            return view('customer/shopping');
        });
    });
    
    • php artisan route:list 查看,成功命名:
    Domain Method URI Name Action Middleware

    | | GET|HEAD | master | | Closure | api |
    | | GET|HEAD | customer/shopping_mall | customer | Closure | api |
    | | GET|HEAD | test_shop/new_object | | Closure | api |

OK 今天先到這裡!Copy/Paste即將告一段落!接下來要深入了解一下 Laravel 的架站要件

晚生學習分享所學經驗,若內容有誤或不清楚,煩請不吝指教!更是歡迎各位大神多多補充,感謝萬分!


上一篇
[Day4] Laravel 6 API Versioning + Email Verification
下一篇
[Day6] Shopping Cart - Views - Controller - DB
系列文
PHP新手30天實戰金流34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言